<!DOCTYPE html><html><head><title>HTML5 Tooltips styling</title>

<link rel="stylesheet" type="text/css" href="./html5tooltips.css" />
<link rel="stylesheet" type="text/css" href="./html5tooltips.animation.css" />
<script type="text/javascript" src="./html5tooltips.js"></script>

</head><body>

  <div class="html5tooltip-bottom" style="box-sizing:border-box;position:fixed;z-index:2147483647;left:100px;top:100px;">
    <div class="html5tooltip-box" box>
      <div class="html5tooltip-text" text>Stick to bottom</div>
      <div class="html5tooltip-more" style="overflow:hidden;display:none;" more>
        <div class="html5tooltip-text" more-text></div>
      </div>
    </div>
  </div>

  <div class="html5tooltip-bottom" style="box-sizing:border-box;position:fixed;z-index:2147483647;left:300px;top:100px;">
    <div class="html5tooltip-box" box>
    <div class="html5tooltip-text" text>Stick to bottom</div>
      <div class="html5tooltip-more" style="overflow:hidden;" more>
        <div class="html5tooltip-text" more-text>Extended version</div>
      </div>
    </div>
  </div>

  <div class="html5tooltip-left" style="box-sizing:border-box;position:fixed;z-index:2147483647;left:100px;top:200px;">
    <div class="html5tooltip-box" box>
      <div class="html5tooltip-text" text>Stick to left</div>
      <div class="html5tooltip-more" style="overflow:hidden;display:none;" more>
        <div class="html5tooltip-text" more-text></div>
      </div>
    </div>
  </div>

  <div class="html5tooltip-left" style="box-sizing:border-box;position:fixed;z-index:2147483647;left:300px;top:200px;">
    <div class="html5tooltip-box" box>
    <div class="html5tooltip-text" text>Stick to left</div>
      <div class="html5tooltip-more" style="overflow:hidden;" more>
        <div class="html5tooltip-text" more-text>Extended version</div>
      </div>
    </div>
  </div>

  <div class="html5tooltip-top" style="box-sizing:border-box;position:fixed;z-index:2147483647;left:100px;top:300px;">
    <div class="html5tooltip-box" box>
      <div class="html5tooltip-text" text>Stick to top</div>
      <div class="html5tooltip-more" style="overflow:hidden;display:none;" more>
        <div class="html5tooltip-text" more-text></div>
      </div>
    </div>
  </div>

  <div class="html5tooltip-top" style="box-sizing:border-box;position:fixed;z-index:2147483647;left:300px;top:300px;">
    <div class="html5tooltip-box" box>
    <div class="html5tooltip-text" text>Stick to top</div>
      <div class="html5tooltip-more" style="overflow:hidden;" more>
        <div class="html5tooltip-text" more-text>Extended version</div>
      </div>
    </div>
  </div>

  <div class="html5tooltip-right" style="box-sizing:border-box;position:fixed;z-index:2147483647;left:100px;top:400px;">
    <div class="html5tooltip-pointer"></div>
    <div class="html5tooltip-box" box>
      <div class="html5tooltip-text" text>Stick to left</div>
      <div class="html5tooltip-more" style="overflow:hidden;display:none;" more>
        <div class="html5tooltip-text" more-text></div>
      </div>
    </div>
  </div>

  <div class="html5tooltip-right" style="box-sizing:border-box;position:fixed;z-index:2147483647;left:300px;top:400px;">
    <div class="html5tooltip-box" box>
    <div class="html5tooltip-text" text>Stick to right</div>
      <div class="html5tooltip-more" style="overflow:hidden;" more>
        <div class="html5tooltip-text" more-text>Extended version</div>
      </div>
    </div>
  </div>

</body></html>
